@import '../assets/theme.scss';

#profile{
  .profile{
    min-height: 600px;
    $profile-width: 940px;
    width: $profile-width;
    margin: 40px auto 0;
    .header{
      height: 60px;
      font-size: 30px;
      text-align: center;
      .icon{
        background-color: $color-main;
        border-radius: 50%;
        padding: 8px;
        color: #FFF;
      }
      color: $color-main;
    }
    .body{
      background-color: #FFF;
      box-shadow: 0 0 10px $color-forbid;
      $info-height: 600px;
      $left-width: 240px;
      .left-info{
        width: $left-width;
        float: left;
        background-color: $color-forbid + #555;
        padding: 20px;
        position: relative;
        .avatar{
          width: $left-width - 40px;
          height: $left-width - 40px;
          border-radius: 50%;
        }
        .message{
          font-size: 20px;
          margin-top: 20px;
          word-wrap: break-word;
          word-break: normal;
          padding-bottom: 34px;
          line-height: 24px;
          transition: $default-transition;
          &:before{
            transition: $default-transition;
            padding-right: 4px;
          }
          &:hover:before{
            color: $color-main;
          }
        }
        $input-top: 212px;
        $input-left: 224px;
        textarea.message{
          opacity: 0;
          pointer-events: none;
          position: absolute;
          cursor: auto;
          width: $left-width - 40px;
          outline: none;
          border: 0px;
          resize: none;
          color: #555;
          font-family: 'MSchool' !important;
          background-color: $color-forbid + #555;
          height: 200px;
          top: $input-top;
          left: $input-left;
          padding: 10px;
          box-shadow:  0 0 10px $color-forbid;
          &.show{
            opacity: 1;
            pointer-events: auto;
          }
        }
        i.icon{
          opacity: 0;
          pointer-events: none;
          position: absolute;
          left: $input-left;
          top: $input-top + 200px;
          font-size: 20px;
          cursor: pointer;
          transition: $default-transition;
          &.MS-icon-check{
            left: $input-left + $left-width - 40px;
          }
          &.MS-icon-close{
            left: $input-left - 20px;
          }
          &:hover{
            color: $color-main;
          }
          &.show{
            opacity: 1;
            pointer-events: auto;
          }
        }
      }
      .right-info{
        font-size: 24px;
        float: left;
        padding: 20px;
        width: $profile-width - $left-width;
        div.icon{
          line-height: 50px;
          padding-left: 10px;
          float: left;
          width: 280px;
          margin-right: 140px;
          margin-bottom: 20px;
          &:before{
            color: $color-main;
            padding-right: 10px;
          }
          &.userName,&.telphone, &.qq{
            cursor: pointer;
            &:hover:after{
              padding-left: 10px;
              content: '\e971';
            }
          }
        }
        .input{
          opacity: 0;
          float: right;
          line-height: 30px;
          height: 30px;
          margin: 10px 0;
          padding: 0 10px;
          border-radius: 4px;
          outline: none;
          border: 1px solid $color-forbid;
          box-shadow: 1px 1px 2px $color-forbid;
          pointer-events: none;
          transition: $default-transition;
          &:focus{
            border-color: #64CBB3;
          }
          &.show{
            opacity: 1;
            pointer-events: auto;
          }
        }
        i.icon{
          opacity: 0;
          float: right;
          line-height: 46px;
          margin-left: 10px;
          cursor: pointer;
          transition: $default-transition;
          pointer-events: none;
          &:hover{
            color: $color-main;
          }
          &.show{
            opacity: 1;
            pointer-events: auto;
          }
        }
      }
      .profile-btn{
        float: left;
        width: 300px;
        height: 38px;
        line-height: 38px;
        border-radius: 20px;
        border: 1px solid $color-main;
        text-align: center;
        margin: 40px auto;
        cursor: pointer;
        background-color: $color-main;
        color: #FFF;
        transition: $default-transition;
        &:hover{
          background-color: $color-main - #333;
          box-shadow: 0 0 4px $color-main;
        }
        &:active{
          background-color: $color-main - #666;
        }
      }
    }
  }
}